<script lang='ts' setup>

withDefaults(defineProps<{
  title: string,
  saveText?: string,
  cancelText?: string,
  defaultLoading?: boolean
}>(), {
  saveText: '保存',
  cancelText: '取消',
  defaultLoading: false
})

const emit = defineEmits(['save'])

function handleSaveHandler():void {
  emit('save', handleCancelHandler)
}

function handleCancelHandler():void {
  window.electron.ipcRenderer.send('application:close-window')
}

</script>

<script lang="ts">
export interface OpenDialogConfig<T> {
  url: string,
  width: number,
  height: number,
  ext?: T
}
export function open<T>(config: OpenDialogConfig<T>): void {
  window.electron.ipcRenderer.send('application:open-dialog-modal', {
    ...config,
    ext: JSON.parse(JSON.stringify(config.ext))
  })
}

export function useDialog<T>(callback: (data: T) => void): void {

  onMounted(() => {
    window.electron.ipcRenderer.on('application:dialog-data', (_, data) => {
      callback(data)
    })
  })
  onUnmounted(() => {
    window.electron.ipcRenderer.removeAllListeners('application:dialog-data')
  })

}

</script>

<template >
  <div class="dialog-wrapper">
    <div class="dialog-wrapper__header drag">
      <div class="title"><logo :size="24"/> {{ title }}</div>
      <div><win-options closeable /></div>
    </div>
    <div class="dialog-wrapper__content">
      <el-scrollbar style="padding: var(--dialog-padding) var(--dialog-padding) 0px var(--dialog-padding);" height="var(--dialog-content-height)">
        <slot height="var(--dialog-content-height)" />
      </el-scrollbar>
    </div>
    <div class="dialog-wrapper__footer">
      <el-button type="primary" @click="handleSaveHandler">{{ saveText  }}</el-button>
      <el-button @click="handleCancelHandler">{{ cancelText }}</el-button>
    </div>
  </div>
</template>

<style scoped lang='less'>
.dialog-wrapper {
  height: 100vh;
  width: 100vw;
  position: relative;
  top: 0px;
  left: 0px;
  --dialog-header-height: 30px;
  --dialog-footer-height: 60px;
  --dialog-padding:10px;
  --dialog-content-height: calc(100vh - var(--dialog-header-height) -
  var(--dialog-footer-height) - var(--dialog-padding));
  .dialog-wrapper__header {
    height: var(--dialog-header-height);
    padding: 0px var(--dialog-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: flex;
      gap: 5px;
      font-size: 12px;
      align-items: center;
    }
  }
  .dialog-wrapper__content {
    :deep(.el-form-item__label) {
      font-size: 12px;
    }
  }
  .dialog-wrapper__footer {
    height: var(--dialog-footer-height);
    padding: var(--dialog-padding);
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
